<template>
  <div class="login">
    <div class="login-box">
      <div class="pcAuthForm">
        <div class="title">
          登录
        </div>
        <div class="PcLogin_middleContainer">
          <div class="tab-pane ">
            <div :class="loginType == 'phone'?'tab-pane-item':''" style="margin-left: 0px;" @click="changeTabFn('phone')"><div>
              <div class="PcLogin_tabTitle__Yb0si">快捷登录</div>

            </div>
            </div>
            <div :class="loginType == 'password'?'tab-pane-item':''" style="margin-left: 39px;" @click="changeTabFn('password')"><div>
              <div class="PcLogin_tabTitle__Yb0si">账号密码登录</div>
            </div>
            </div>
          </div>
          <div v-if="loginType== 'phone'" class="phone">
            <div class="commonInput_container ">
              <div class="le-input">
                <input v-model="form1.phone" autocomplete="off" maxlength="11" placeholder="请输入手机号">
              </div>
              <div v-if="form1.phoneError" class="errorMsg accountMsg"> 请输入手机号 </div>
            </div>
            <div class="commonInput_container flexStyle ">
              <div class="captchaBox_box__zURFJ">
                <div class="le-input">
                  <input v-model="form1.smsCode" autocomplete="off" placeholder="请输入短信验证码" class="captchaBox_inputContainer__V5STV" style="height: 56px;">
                </div>
                <div class="le-button " @click="getSmsMsgCodeFn">
                  {{ form1.getcodemes }}
                </div>
              </div>
              <div v-if="form1.smsCodeError" class="errorMsg captchaMsg">请输入验证码</div>
            </div>

            <div class="PcLogin_interface_errorMsg__pkEYf" />
            <div class="checkBoxContainer loginCheck flexStyle">
              <div class="le-checkbox-container">
                <div class="le-checkbox-content">
                  <el-checkbox v-model="checked" class="ck-img" />
                  <p class="PrivacyInfo_infoStyle__YpTrQ">如果您输入的手机号未注册，将为您进行注册，注册即表示您同意
                  </p>

                </div>
                <div>
                  <span class="PrivacyInfo_ ">
                    <span class="PrivacyInfo_inlineBlock__YbZsr">注册协议、</span>
                    <span class="PrivacyInfo_inlineBlock__YbZsr">隐私政策</span>
                  </span>
                </div>
              </div>
            </div>
            <button type="button" class="commonBtn loginBtn_quick" @click="loginFn">登录</button>

            <div class="commonRegist flexStyle"><span>注册账号</span> <p class="arrowRight" /></div>
          </div>

          <!-- 账号密码登录 -->
          <div v-if="loginType === 'password'" class="password">
            <div class="commonInput_container ">
              <div class="le-input">
                <input v-model="form2.phone" autocomplete="off" placeholder="请输入手机号/邮箱">
              </div>
              <div v-if="form2.phoneError" class="errorMsg accountMsg">
                请输入手机号/邮箱
              </div>
            </div>
            <div class="commonInput_container ">
              <div class="le-input">
                <input v-model="form2.password" autocomplete="off" type="password" placeholder="请输入密码">
              </div>
              <div v-if="form2.passwordError" class="errorMsg passwordMsg">
                请输入密码
              </div>
            </div>

            <div class="checkBoxContainer loginCheck flexStyle">
              <div class="le-checkbox-container">
                <div class="le-checkbox-content">
                  <el-checkbox v-model="checked" class="ck-img" />已阅读并同意
                  <span class="PrivacyInfo_ ">
                    <span class="PrivacyInfo_inlineBlock__YbZsr">注册协议、</span>
                    <span class="PrivacyInfo_inlineBlock__YbZsr">隐私政策</span>
                  </span>
                </div>

              </div>
            </div>
            <button type="button" class="commonBtn loginBtn_quick" @click="loginFn">登录</button>
            <div class="commonRegist flexStyle">
              <p @click="goFindPwdFn">忘记密码</p>
              <p class="verticalSplitLine">|</p><span>注册账号</span> <p class="arrowRight" /></div>
          </div>

        </div>
      </div>
    </div>

  </div>

</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import { _smsMsgCode, _appUserRegister, _getKey, _mobileLogin, _getInfo } from '@/api/homePage'

export default {
  data() {
    return {
      checked: false,
      loginType: 'phone',
      form1: {
        phone: '',
        smsCode: '',
        smsCodeError: false,
        phoneError: false,
        getcodemes: '获取验证码'

      },
      form2: {
        phone: '',
        password: '',
        phoneError: false,
        passwordError: false

      }

    }
  },
  mounted() {
    console.log('获取store里的登录信息', this.$store.getters.userInfo)
  },
  methods: {
    // 头部tab点击
    changeTabFn(type) {
      if (type === 'phone') {
        this.loginType = 'phone'
      } else {
        this.loginType = 'password'
      }
    },
    // 获取手机号
    async getSmsMsgCodeFn() {
      if (this.form1.phone.trim() === '') {
        this.form1.phoneError = true
        return
      }
      const res = await _smsMsgCode({
        phone: this.form1.phone,
        smsType: 0
      })

      if (res && res.code == 200) {
        this.form1.getcodemes = '已发送'
      }
    },
    // 登录
    async loginFn() {
      // 手机号登录
      if (this.loginType === 'phone') {
        if (this.form1.phone.trim() === '') {
          this.form1.phoneError = true
          return
        } else {
          this.form1.phoneError = false
        }
        if (this.form1.smsCode.trim() === '') {
          this.form1.smsCodeError = true
          return
        } else {
          this.form1.smsCodeError = false
        }
        if (!this.checked) {
          _validate.openTip(this, '请勾选协议', 'warning')
          return
        }
        const res = await _appUserRegister({
          phone: this.form1.phone,
          smsCode: this.form1.smsCode
        })
        if (res && res.code == 200) {
          sessionStorage.setItem('token', res.data)
          this.$store.commit('SET_TOKEN', res.data)
          this.getUserInFoFn()
        }
      } else if (this.loginType === 'password') {
        if (this.form2.phone.trim() === '') {
          this.form2.phoneError = true
          return
        } else {
          this.form2.phoneError = false
        }
        if (this.form2.password.trim() === '') {
          this.form2.passwordError = true
          return
        } else {
          this.form2.passwordError = false
        }
        if (!this.checked) {
          _validate.openTip(this, '请勾选协议', 'warning')
          return
        }
        const res = await _getKey({
          userName: this.form2.phone
        })
        if (res && res.code == 200) {
          const params = {
            userName: this.form2.phone,
            password: this.form2.password
          }
          const res2 = await _mobileLogin(params)
          console.log(res2, 9999999999999)
          if (res2 && res2.code == 200) {
            this.getUserInFoFn()
          }
        }
      }
    },
    // 登录接口存储登录信息
    setUserInFoFn(res) {
      this.$store.commit('SET_USER_INFO', res)
      this.$router.push({
        path: './homePage'
      })
    },
    // 获取登录账号信息
    async getUserInFoFn() {
      const res3 = await _getInfo()
      if (res3 && res3.code == 200) {
      // 存储登录信息值
        this.setUserInFoFn(res3)
      }
    },
    // 忘记密码
    goFindPwdFn() {
      this.$router.push({
        path: '/findPwd'
      })
    }
  }

}

</script>
<style scoped lang="scss">
.login{
  width: 100%;
    height: 100%;
    background-image: url("../../assets/image/background-bg.png");
    background-size: cover;
    background-repeat: no-repeat;

.login-box{

  input, textarea {
    outline: 0;
  }
  box-sizing: border-box;
    height: 100%;
    margin: 0 auto;
    padding-top: 65px;
    width: 1200px;
    .pcAuthForm {
    background: hsla(0,0%,100%,.95);
    border-radius: 4px;
    float: right;
    height: auto;
    margin-bottom: 80px;
    position: relative;
    right: 30px;
    width: 460px;
    .title {
    color: #252525;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 58px 54px 35px 50px;
}

.PcLogin_middleContainer {
    box-sizing: border-box;
    padding: 0 45px;
    width: 100%;
    .le-button{
      background: #fff1f1;
    border: 1px solid #fadfdf;
    border-radius: 4px;
    color: #e1140a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    height: 56px;
    letter-spacing: 0;
    margin-left: 5px;
    opacity: .7;
    text-align: center;
    white-space: nowrap;
    width: 122px;
    line-height: 56px;
    }
}

.tab-pane {
    display: flex;
    .tab-pane-item {
    border-bottom: 3px solid #e1140a;
    padding: 0 0 5px 0;
}

}

.tab-pane-item {
    cursor: pointer;
    position: relative;

}
.tab-pane-item-active{
  animation: moveLeft .2s linear;
    visibility: visible;
}

.commonInput_container {

    height: 56px;
    margin-top: 28px;
    position: relative;
    width: 100%;
    .errorMsg{
    align-items: center;
    color: #e1140a;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
  }
    .le-input {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    position: relative;
    width: 100%;

      input {
          border: 1px solid #eee;
          text-indent: 18px;
          transition: all .3s cubic-bezier(.645,.045,.355,1);
          width: 100%;
          height: 100%;
      }
}
.captchaBox_box__zURFJ {
    display: flex;
    align-items: center;
    width: 100%;
}
}
.checkBoxContainer{
  width: 100%;
  margin-top: 50px;
  p{
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 16px;
    color: #252525;
  }
  .le-checkbox-content{
    display: flex;
    .PrivacyInfo_{
      margin-left: 10px;
    }
  }

}
.commonBtn{
  background-image: linear-gradient(90deg,#f22d18,#e53939);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 10px 0 hsla(3,45%,67%,.49);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    height: 56px;
    text-align: center;
    width: 370px;
    margin: 8px auto 10px;
}
.commonRegist{
  display: flex;
  align-items: center;
  color: #252525;
  font-size: 13px;
  font-weight: 400;
  justify-content: flex-end;
  margin-bottom: 50px;
  .arrowRight {
    background-color: initial;
    border-color: #979797;
    border-style: solid;
    border-width: 1px 1px 0 0;
    height: 5px;
    margin-left: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
}
  }
    }

}
}
</style>
